<template>
  <div class="search-result">
     <van-dropdown-menu >
      <van-dropdown-item @change="changeList('default','id_desc')" v-model="value1" :options="option1" />
      <van-dropdown-item @change="changeList('price',$event)" v-model="value2" :options="option2" />
      <van-dropdown-item @change="changeList('cate',$event)" v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <div v-if="list.length">
    <van-grid  :column-num="2"  class="goodslist">
      <van-grid-item
        v-for="obj in list"
        :key="obj.id"
        class="item"
         :to="'/gooddetail?id='+obj.id"
      >
        <van-image class="img" :src="obj.list_pic_url" />
        <span class="gname">{{ obj.name }}</span>
        <span class="price">￥{{ obj.retail_price }}</span>
      </van-grid-item>
    </van-grid>
    </div>
     <van-empty v-else  description="暂无相关商品" />
  </div>
</template>

<script>
// 导入请求方法
import { getSearchResult } from "@/api/search";
export default {
  name: "SearchResult",
  components: {},
  props: {
    searchText1: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      cartlist: [],
      list: [], // 定义存储变量
      page: 1,
      perPage: 20,
      value1:'id_desc',
        value2:'',
        value3:0,
        option1:[
          { text: '综合', value: 'id_desc' },
        ],
        option2:[
          { text: '默认', value: '' },
          { text: '价格升序', value: 'price_asc' },
          { text: '价格降序', value: 'price_desc' },
        ],
      option3:[],
    };
  },
  computed: {},
  watch: {
    searchText1: {
      deep: true,
      handler: function (val, oldval) {
        this.getlist();
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async getlist(cid,sort='id',order='desc') {
      const { data } = await getSearchResult({
        keyword: this.searchText1, // 查询关键词
        categoryId: cid,
         sort,
        order
      });
      this.list = data.data.data;
      this.option3 = data.data.filterCategory.map(val=>({
         text:val.name,
        value :val.id
      }))
    },
  },
};
</script>

<style scoped lang="less">
.goodslist {
  .item {
    text-align: center;
    .img {
      width: 300px;
      height: 300px;
    }
    .gname {
      font-size: 24px;
    }
    .price {
      margin-top: 20px;
      color: #e11c34;
      font-size: 28px;
    }
  }
}
.sub {
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 40px;
  display: flex;
  justify-content: space-evenly;
  .price {
    display: flex;
    .pricebtn {
      color: #000;
      display: flex;
      flex-direction: column;
    }
  }
}
.active {
  color: red;
}
.catlist {
  margin: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 30px;
  .item {
    margin-right: 20px;
    padding: 0 10px;
    border: 1px solid #333;
  }
}
</style>